<!DOCTYPE html>
<html>
<head>
    <title>Animation effects</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
</head>
<body>
    <a class="offline-button" href="../index.html">Back</a>
    
        <div id="example" class="k-content">

            <div class="configuration k-widget k-header">
                <span class="configHead">Animation Settings</span>
                <ul class="options">
                    <li>
                        <input id="toggle" name="animation" type="radio" /> <label for="toggle">toggle animation</label>
                    </li>
                    <li>
                        <input id="slide" name="animation" type="radio" checked="checked" /> <label for="slide">slide animation</label>
                    </li>
                    <li>
                        <input id="expand" name="animation" type="radio" checked="checked" /> <label for="expand">expand animation</label>
                    </li>
                    <li>
                        <input id="opacity" type="checkbox" checked="checked" /> <label for="opacity">animate opacity</label>
                    </li>
                    <li>
                        <input id="delay" name="animation" type="text" value="100" class="k-textbox" /> <label for="delay">open/close delay</label>
                    </li>
                </ul>
            </div>

            <ul id="menu">
                <li>
                    Furniture
					<ul> <!-- moving the UL to the next line will cause an IE7 problem -->
						<li>Tables &amp; Chairs</li>
						<li>Sofas</li>
						<li>Occasional Furniture</li>
						<li>Childerns Furniture</li>
						<li>Beds</li>
					</ul>

				</li>
				<li>
					Decor
					<ul> <!-- moving the UL to the next line will cause an IE7 problem -->
						<li>Bed Linen</li>
						<li>Throws</li>
						<li>Curtains &amp; Blinds</li>
						<li>Rugs</li>
						<li>Carpets</li>
					</ul>
				</li>
				<li>
					Storage
					<ul> <!-- moving the UL to the next line will cause an IE7 problem -->
						<li>Wall Shelving</li>
						<li>Kids Storage</li>
						<li>Baskets</li>
						<li>Multimedia Storage</li>
						<li>Floor Shelving</li>
						<li>Toilet Roll Holders</li>
						<li>Storage Jars</li>
						<li>Drawers</li>
						<li>Boxes</li>
					</ul>
								
				</li>
				<li>
					Lights
					<ul> <!-- moving the UL to the next line will cause an IE7 problem -->
						<li>Ceiling</li>
						<li>Table</li>
						<li>Floor</li>
						<li>Shades</li>
						<li>Wall Lights</li>
						<li>Spotlights</li>
						<li>Push Light</li>
						<li>String Lights</li>
					</ul>
                </li>
            </ul>

            <script>
                $(document).ready(function() {
                    var original = $("#menu").clone(true);

                    original.find(".k-state-active").removeClass("k-state-active");

                    $(".configuration input").change( function() {
                        var menu = $("#menu"),
                            clone = original.clone(true);

                        menu.data("kendoMenu").close($("#menu .k-link"));

                        menu.replaceWith(clone);

                        initMenu();
                    });
                    var getEffects = function () {
                        return (($("#expand")[0].checked ? "expand:vertical " : "") +
                                ($("#slide")[0].checked ? "slideIn:down " : "") +
                                ($("#opacity")[0].checked ? "fadeIn" : "")) || false;
                    };

                    var initMenu = function () {
                        $("#menu").kendoMenu({
                            animation: { open: { effects: getEffects() } },
                            hoverDelay: $("#delay")[0].value
                        })
                        .css({
                            marginRight: "220px"
                        });
                    };

                    initMenu();
                });
            </script>

            <style scoped>
                .configuration .k-textbox
                {
                    margin-top: -3px;
                }
            </style>
        </div>

</body>
</html>
